<template>
  <div class="test-font">
    {{ msg }}
  </div>
  <button class="test-button" @click="changeMsg">修改msg</button>
  <button class="test-button" @click="changeA">修改A</button>
</template>
<script lang="ts">
import { defineComponent, ref, watch, reactive } from "vue";
export default defineComponent({
  setup() {
    const msg = ref("hello ref");
    const changeMsg = () => {
      msg.value = "this is change msg";
    };
    //如果监听多个属性，那么第一个参数是数组，相应的nval和oldval也是数组
    watch(msg, (nval, oldval) => {
      console.log(nval, oldval);
    });

    //如果是监听reactive里面的一个属性，不能直接watch reactive.xx,需要函数返回
    const data = reactive({
      a: 1,
      b: 2,
    });
    watch(
      () => data.a, //直接传data.a会警告，因为watch只接受function、reactive object、ref，或者是数组包含这些类型
      (v, o) => {
        console.log(v, o);
      }
    );

    return {
      data,
      changeA: () => {
        data.a = 3;
      },
      msg,
      changeMsg,
    };
  }
});
</script>
